import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:ichinesereader/models/evaluation/linguisticKnowledgeResult.dart';
import 'package:ichinesereader/pages/common/circularImage.dart';
import 'package:syncfusion_flutter_gauges/gauges.dart';

class KnowledgeGauge extends StatelessWidget {
  final String studentName;
  final TotalProgress progressData;
  final String mode;

  const KnowledgeGauge(
      {Key? key,
      required this.studentName,
      required this.progressData,
      required this.mode})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    double _progress = 0;

    if (progressData.progress == null ||
        progressData.progress == 0 ||
        progressData.total == null ||
        progressData.total == 0) {
      _progress = 0;
    } else {
      _progress = (progressData.progress! / progressData.total!) * 100;
    }
    return GestureDetector(
      onTap: () {},
      child: mode == "water"
          ///////无法改成圆形的图片//////
          ? NonCacheCircularImage('https://resources.ichinesereader.com/media/evaluation/bubble_yellow_${_progress.toInt().toString()}.gif', 160)
         

          : SfRadialGauge(
              enableLoadingAnimation: true,
              animationDuration: 2500,
              axes: <RadialAxis>[
                RadialAxis(
                    axisLineStyle: const AxisLineStyle(
                        thicknessUnit: GaugeSizeUnit.factor, thickness: 0.2),
                    radiusFactor: 0.8,
                    showTicks: false,
                    interval: 20,
                    showFirstLabel: false,
                    showLastLabel: true,
                    maximum: 100,
                    axisLabelStyle: const GaugeTextStyle(),
                    annotations: <GaugeAnnotation>[
                      GaugeAnnotation(
                          angle: 180,
                          widget: Row(
                            mainAxisSize: MainAxisSize.min,
                            children: <Widget>[
                              Text(
                                '${_progress.toInt().toString()}%',
                                style: TextStyle(
                                    color: Get.isDarkMode
                                        ? Get.theme.primaryColorDark
                                        : Colors.blueGrey,
                                    fontSize: 14.0,
                                    fontWeight: FontWeight.w400,
                                    fontStyle: FontStyle.italic),
                              ),
                            ],
                          )),
                    ],
                    pointers: <GaugePointer>[
                      NeedlePointer(
                          enableAnimation: true,
                          gradient: const LinearGradient(
                              colors: <Color>[
                                Color.fromRGBO(203, 126, 223, 0),
                                Color(0xffd8ffff)
                              ],
                              stops: <double>[
                                0.25,
                                0.75
                              ],
                              begin: Alignment.bottomCenter,
                              end: Alignment.topCenter),
                          animationType: AnimationType.easeOutBack,
                          value: _progress,
                          animationDuration: 1300,
                          needleStartWidth: 2,
                          needleEndWidth: 4,
                          needleLength: 0.7,
                          knobStyle: const KnobStyle(
                            knobRadius: 0,
                          )),
                      RangePointer(
                          value: _progress,
                          width: 0.20,
                          sizeUnit: GaugeSizeUnit.factor,
                          animationDuration: 1300,
                          animationType: AnimationType.easeOutBack,
                          enableAnimation: true)
                    ])
              ],
            ),
    );
  }
}
